<template>
    <my-information>
        <p slot="title">{{ isEdit() ? '用户修改' : '用户创建'}}</p>
        <div class="panel-body" slot="content">
            <form @submit.prevent="submit">
                <div class="row">
                    <div class="col-md-9">
                        <div class="form-group">
                            <label class="control-label" for="user-username">用户名</label>
                            <input type="text" id="user-username" class="form-control" v-model="user.username">
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="user-password">密码</label>
                            <input type="password" id="user-password" class="form-control" v-model="user.password">
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="user-duty">岗位</label>
                            <input type="text" id="user-duty" class="form-control" v-model="user.duty">
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="user-name">名字</label>
                            <input type="text" id="user-name" class="form-control" v-model="user.name">
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="user-phone">电话</label>
                            <input type="text" id="user-phone" class="form-control" v-model="user.phone">
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="user-mobile">手机号</label>
                            <input type="text" id="user-mobile" class="form-control" v-model="user.mobile">
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="user-email">邮箱</label>
                            <input type="text" id="user-email" class="form-control" v-model="user.email">
                        </div>
                        <div class="form-group">
                            <label class="control-label">状态</label>
                            <div id="user-on_job">
                                <label><input type="radio" value="1" v-model="user.on_job"> 在职</label>
                                <label><input type="radio" value="0" v-model="user.on_job"> 离职</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">性别</label>
                            <div id="user-sex">
                                <label><input type="radio" value="男" v-model="user.sex"> 男</label>
                                <label><input type="radio" value="女" v-model="user.sex"> 女</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="user-department">部门</label>
                            <select id="user-department" class="form-control" v-model="user.department">
                                <option v-for="department in departments" :value="department.name">
                                    {{ department.name }}
                                </option>
                            </select>
                            <div class="help-block"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="user-role_id">角色类型</label>
                            <select id="user-role_id" class="form-control" v-model="user.role_id">
                                <option v-for="role in roles" :value="role.pid">
                                    {{ role.name }}
                                </option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">修改</button>
            </form>
        </div>
    </my-information>
</template>

<script>
export default {
  data () {
    return {
      user: {
        username: '',
        password: '',
        duty: '',
        name: '',
        phone: '',
        mobile: '',
        email: '',
        on_job: 1,
        sex: '男',
        department: '',
        role_id: 0
      },
      departments: [],
      roles: []
    }
  },
  mounted () {
    this.$nextTick(function() {
      this.getEdit()
    })
  },
  methods: {
    submit () {
      let formdata = this.user
      let url = this.isEdit() ? 'user/update' : 'user/store'
      this.$http.post(url, formdata).then(
        res => {
          let data = res.data
          console.log(data)
          if (data && data.status === 1) {
            this.$Message.success(data.msg)
          } else {
            this.$Message.error(data.msg)
          }
        },
        err => {
          this.$Message.error('请求错误')
        }
      )
    },
    isEdit () {
      console.log(this.$route.path)
      return this.$route.path !== '/user/create'
    },
    getEdit () {
      let url = this.isEdit() ? 'user/edit' : 'user/create'
      let obj = this.isEdit() ? { pid: parseInt(this.$route.params.pid) } : {}
      this.$http.post(url, obj).then(
        res => {
          let data = res.data
          console.log(data)
          if (data && data.status === 1) {
            if (this.isEdit()) {
              this.user = data.data.user
            }

            this.departments = data.data.departments
            this.roles = data.data.roles
          } else {
            this.$Message.error(data.msg)
          }
        },
        err => {
          this.$Message.error('请求错误')
        }
      )
    }
  }
}
</script>